<template>
    <div class='goodsDetails'> 
        <!-- 单品信息摘要 -->
        <div class="goods_summary_box">
            <!-- 品牌和商品名称 -->
            <div class="title_and_icon marginTop0_5 paddingLeftPer5 paddingRightPer5">
                <span class='brand inlineBlock height0_8 lineHeight0_8 fontSize0_4 blackBoder borderRadius0_13 verticalMiddle paddingLeft0_13 paddingRight0_13'>{{productInfoData.brandName}}</span>
                <span v-if='productInfoData.salesType=="7"' class="cross-border">{{$t("crossBorder")}}</span>
                <span class="dataProductName verticalMiddle fontSize0_7 marginBottom0">{{productInfoData.productName}}</span>
            </div>
            <!-- 商品编码 -->
            <p class="goods_code gray919191 fontSize0_65 height1_3 lineHeight1_3 paddingLeftPer5 paddingRightPer5">{{$t("productSysCode")}} : {{productInfoData.productCode}}</p>
            <!-- 因为无库存服务器不会返回eachSidePrice的字段，所以售价暂时用minSalesPrice代替，在goodsSku.vue文件中是用正常的字段和判断-->
            <div class="height1_3 lineHeight1_3 fontSize0_65 paddingLeft0_75 paddingRight0_75" v-if='productInfoData && productInfoData.minSalesPrice'>
                <div>
                <p class='fontSize0_9 inlineBlock fontWeightBold'>￥{{productInfoData.minSalesPrice}}</p>&nbsp;&nbsp;
                <!-- 如果原价小于售价，则隐藏原价 -->
                <span class='fontSize0_65 gray919191' v-if='productInfoData.minSalesPrice<productInfoData.marketPrice'>{{$t("marketPrice")}} <s> {{productInfoData.marketPrice}}</s></span>
                </div>
            </div>
            <div class="sub-box flex-box" v-if='productInfoData.salesType=="7"'>
                <!-- 邦购里没有找到此数据 -->
                <span class="sub-date" v-if='productInfoData && productInfoData.taxPrice'>{{ $t('crossBorderTax', { money: productInfoData.taxPrice }) }}</span>
                <i class="tax_detail_btn bgwap-iconfont">&#xe65c;</i>
            </div>
            <div v-if='productInfoData.salesType !="7"' class="tax_detail_btn" type="hidden"></div>
            <div v-if='productInfoData.salesType == "5"' class="sub-box flex-box">
                <span class="sub-tag">{{$t("preOrder")}}</span>
                <span class="sub-date" v-if='productInfoData && productInfoData.deliverDate'>{{$t("deliverDate")}}：{{productInfoData.deliverDate}}</span>
            </div>
            <!-- 正品保障，14天退换 -->
            <div class="height2_8 grayBoderBottomeaeaea grayBoderTopeaeaea flex-box">
                <p class="relative floatLeft inlineBlock textCenter paddingTop1_4 widthPer33_33">
                    <span class='icon_font absolute marginLeft-0_5 topPer10 leftPer50'>
                        <i class="iconfont fontSize1_2 gray666">&#xe907;</i>
                    </span>
                    <span class='fontSize0_65'>{{$t("GenuineProtection")}}</span>
                </p>
                <p class="relative floatLeft inlineBlock textCenter paddingTop1_4 widthPer33_33">
                    <span class='icon_font absolute marginLeft-0_5 topPer10 leftPer50'>
                        <i class="iconfont fontSize1 gray666">&#xe919;</i>
                    </span>
                    <span class='fontSize0_65'>{{$t("fastDelivery")}}</span>
                </p>
                <p class="relative floatLeft inlineBlock textCenter paddingTop1_4 widthPer33_33">
                    <span class='icon_font absolute marginLeft-0_5 topPer10 topPer6 leftPer50'>
                        <i class="iconfont fontSize1_1 gray666">&#xe900;</i>
                    </span>
                    <span class='fontSize0_65'>{{$t("SaleProtection")}}</span>
                </p>
            </div>
            <div class="whiteBackgroundf7f7f7 height0_5 widthPer100"></div>
            <p class="chooses grayBoderBottomeaeaea grayBoderTopeaeaea height2_2 lineHeight2_2 fontSize0_7 overflowHidden paddingLeftPer5 paddingRightPer5" v-on:click='openPopup(productInfoData)'>
                {{$t("selectSize")}}
                <span class='gray919191 floatRight'>
                    <i class="iconfont more_icon">&#xe607;</i>
                </span>
            </p>
            <div class="whiteBackgroundf7f7f7 height0_5"></div>  
        </div> 
        <!-- vux中的插件 -->
        <sticky class='sticky'>
            <tab :line-width='0' active-color="#f8584f"  class='grayBoderBottomeaeaea height2_2 lineHeight2_2'>
                <div class=' inlineBlock widthPer100 ' @click="anchorProductImage()"><tab-item class='widthPer100 fontSize0_7 height2 whiteBackgroundfff lineHeight2'>{{$t("ProductImageText")}}</tab-item></div>
                <div class=' inlineBlock widthPer100 ' @click="anchorProductInfo()"><tab-item class='widthPer100 fontSize0_7 height2 whiteBackgroundfff lineHeight2'>{{$t("productInfo")}}</tab-item></div>
            </tab>
        </sticky> 
        <div id="main" class='backgroundfff paddingLeftPer5 paddingRightPer5'>
            <p id="stickNavWrap_item" class="stickNavWrap_item height2 lineHeight2 fontSize0_8 marginTop0_5">{{$t("ProductImageText")}}</p>
            <!-- 模特展示 -->
            <div v-if='descriptionData && descriptionData.images && descriptionData.images[2] && descriptionData.images[2].length'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/mtzs_wap.png" alt=""></div>
            <ul class="sixPhoto" v-if='descriptionData && descriptionData.images && descriptionData.images[2] && descriptionData.images[2].length'>
                <li class='fontSize0' v-for='datas in descriptionData.images[2]'>
                <!-- 图片懒加载 -->
                    <x-img v-bind:src='"//pic1.banggo.com/" + datas.imageUrl' class="ximg-demo" error-class="ximg-error" :offset="-100" ></x-img>
                </li>
            </ul>
            <!-- 细节展示 -->
            <div v-if='descriptionData && descriptionData.images && descriptionData.images[4] && descriptionData.images[4].length'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/xjzs_wap.png" alt=""></div>
            <ul class="ninePhoto" v-if='descriptionData && descriptionData.images && descriptionData.images[4] && descriptionData.images[4].length'>
                <li class='fontSize0' v-for='datas in descriptionData.images[4]'>
                    <x-img v-bind:src='"//pic1.banggo.com/" + datas.imageUrl' class="ximg-demo" error-class="ximg-error" :offset="-100" ></x-img>
                </li>
            </ul> 
            <!-- 颜色选择 -->
            <div v-if='descriptionData && descriptionData.images && descriptionData.images[3] && descriptionData.images[3].length'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/ysxz_wap.png" alt=""></div>
            <ul v-if='descriptionData && descriptionData.images && descriptionData.images[3] && descriptionData.images[3].length'>
                <li class='fontSize0' v-for='datas in descriptionData.images[3]'>
                    <x-img v-bind:src='"//pic1.banggo.com/" + datas.imageUrl' class="ximg-demo" error-class="ximg-error" :offset="-100" ></x-img>    
                    <p class='fontSize0_65'>{{datas.colorName}}</p>
                </li>
            </ul>  
            <!-- 尺码规格 -->
            <div v-if='descriptionData && descriptionData.sizeTable && descriptionData.sizeTable.length'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/cmgg_wap.png" alt=""></div>
            <table class="sizeTable widthPer100 height1_3 lineHeight1_3 fontSize0_7 borderCollapse" v-if='descriptionData && descriptionData.sizeTable && descriptionData.sizeTable.length'>
                <!-- 循环七条大数据里的第0项(也可以使任意一项)，目的是拿到18条元素的下标 -->
                <tr v-for='(datas,index) in descriptionData.sizeTable[0]'>
                    <!-- 再循环七条大数据，{{datasss[index]}}是依次展示每条数据里的18条元素 -->
                    <td class='grayBoder textCenter' v-for='datasss in descriptionData.sizeTable'>{{datasss[index]}}</td>
                </tr>
            </table> 
            <!-- 测试方法 -->
            <div v-if='descriptionData && descriptionData.sizePicture && descriptionData.sizePicture != ""'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/clff_wap.png" alt=""></div>
            <p v-if='descriptionData && descriptionData.sizePicture && descriptionData.sizePicture != ""'>
                <x-img v-bind:src='"http://pic1.banggo.com" + descriptionData.sizePicture' class="ximg-demo" error-class="ximg-error" :offset="-100"></x-img>       
            </p>  
            <!-- 商品信息 -->
            <div id="detailTab"><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/spxx_wap.png" alt=""></div>
            <ul class="goodsMessage">
                <li class='height0_8 lineHeight0_8 fontSize0_65' v-if='descriptionData && descriptionData.brandName'><strong>{{$t("brand")}}：</strong>{{descriptionData.brandName}}</li>
                <li class='height0_8 lineHeight0_8 fontSize0_65' v-if='descriptionData && descriptionData.productName'><strong>{{$t("productName")}}：</strong>{{descriptionData.productName}}</li>
                <li class='height0_8 lineHeight0_8 fontSize0_65' v-if='descriptionData && descriptionData.productSysCode'><strong>{{$t("productCode")}}：</strong>{{descriptionData.productSysCode}}</li>
                <li class='height0_8 lineHeight0_8 fontSize0_65' v-if='descriptionData && descriptionData.categories && descriptionData.categories.categoryName'><strong>{{$t("category")}}：</strong>{{descriptionData.categories.categoryName}}</li>
                <li class='height0_8 lineHeight0_8 fontSize0_65' v-if='descriptionData && descriptionData.marketPrice'><strong>{{$t("marketPrice")}}：</strong>{{descriptionData.marketPrice}}</li>
            </ul>
            <ul class="goodsAttrs" v-if='descriptionData && descriptionData.goodsAttrs'>
                <li class='height0_8 lineHeight0_8 fontSize0_65' v-for='datas in descriptionData.goodsAttrs'><strong>{{datas.attrName}}：</strong>{{datas.attrValue[0]}}</li>
            </ul>
            <!-- 品牌介绍 -->
            <div v-if='descriptionData && descriptionData.brandInfo' class='brandIntroduction'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/ppjs_wap.png" alt=""></div>
            <p class='fontSize0_65'>{{descriptionData.brandInfo}}</p>
            <!-- 编辑推荐 -->
            <div v-if='descriptionData && descriptionData.salePoint'><img src="http://s.banggo.com/pub7/images/mbshop/detailtitle/bjtj_wap.png" alt=""></div>
            <p class="fontSize0_65 marginBottom4">{{descriptionData.salePoint}}</p>                                              
        </div>   
        <div class="hidden_area">
            <input id="goods_sn" type='hidden' v-bind:value="productInfoData.productSysCode" />
            <input id="channel_code" type='hidden' v-bind:value="productInfoData.channelCode" />
        </div>                          
    </div>
</template>

<script>
import '../../../style/normalize.css'
import '../../../style/base.css'
import './css/goods.scss'
import { Sticky, TabItem, Tab, XImg } from 'vux'
export default {
    components: {
        Sticky,
        TabItem,
        Tab,
        XImg
    },    
    props: {
        // 从父组件传递过来的数据
        productInfoData: {
            default: function() {
                return []
            }
        },        
        // 从父组件传递过来的数据        
        descriptionData: {
            default: function() {
                return []
            }
        }       
    },  
    methods: { 
        // 调用父组件的点击图文详情跳转至对应锚点 
        anchorProductImage() {
            this.$emit('jumpProductImage')
        },
        // 调用父组件的点击商品信息跳转至对应锚点 
        anchorProductInfo() {
            this.$emit('jumpProductInfo')
        },
        // 开启弹窗
        openPopup(productInfoData) {
            // 如果有库存
            if (productInfoData.stockNum) {
                this.$emit('setPopupState')
            }
        }                
    }   
}
</script>